<template>
  <div>
    <van-nav-bar
      title="AI上报市容顽症事件列表"
      left-text=""
      left-arrow
      :fixed="true"
      @click-left="onClickLeft"
    />
    <div class="header-choise">
      <div class="search-box" @click="sequence">
        <span class="search-text">时间排序</span>
        <van-icon name="ascending" />
      </div>
      <div class="filtrate-box" is-link @click="showFiltrate">
        <span class="filtrate-text">筛选</span>
        <img class="filtrate-icon" :src="filtrateIcon" />
      </div>
    </div>
    <div class="content">
       <scroller :on-infinite="onInfinite"
          :on-refresh="onRefresh"
　　       ref="my_scroller">
       <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh" loosing-text="释放刷新" pulling-text="下拉刷新" success-text="刷新成功">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多啦"
          offset="10"
          :immediate-check="false"
          @load="onLoad"
        > -->
          <div class="content-box" v-for="(item, index) in list" :key="index">
            <div class="content-left"></div>
            <div class="content-right">
              <div class="content-detail">
                <div class="content-detail-text">{{ item.msgTypeCn }}</div>
                <div class="content-detail-time">
                  <span class="content-detail-time-lable">发现时间</span>
                  <span class="content-detail-time-value">{{ item.createTime }}</span>
                </div>
                <div class="content-detail-event">
                  <span class="content-detail-event-lable">事件方式</span>
                  <span class="content-detail-event-value">{{ item.region }}</span>
                </div>
              </div>
              <div class="content-icon" @click="handDetail(item)"></div>
            </div>
          </div>
         <!-- </van-list>
      </van-pull-refresh> -->
      </scroller>
    </div>
    <!-- 筛选 -->
    <van-popup
      v-model="filtrateShow"
      closeable
      close-icon-position="top-right"
      round
      position="bottom"
      :style="{ height: '30%' }"
    >
      <div class="filtrate-popup-title">
        <div class="filtrate-popup-icon" @click="filtrateBtn"></div>
        <div class="filtrate-popup-text">筛选</div>
      </div>
      <div class="filtrate-radio-box">
        <div class="filtrate-radio-title">案件类型</div>
        <div class="filtrate-radio-btn">
         <van-radio-group class="filtrate-radio-btn-box" v-model="radioType" @change="getRadioType">
            <van-radio name="垃圾箱溢满">垃圾箱溢满</van-radio>
            <van-radio name="小包垃圾丢弃">小包垃圾丢弃</van-radio>
            <van-radio name="建筑垃圾偷倒">建筑垃圾偷倒</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="filtrate-radio-box">
        <div class="filtrate-radio-title">网格编号</div>
        <div class="filtrate-radio-btn">
          <van-radio-group
            class="filtrate-radio-btn-box"
            v-model="radioGrid"
            @change="getRadioGrid"
          >
            <van-radio name="0701">0701</van-radio>
            <van-radio name="0702">0702</van-radio>
            <van-radio name="0703">0703</van-radio>
          </van-radio-group>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { listPageAiList } from '../../../utils/api'
export default {
  name: "garbageClassification",
  data() {
    return {
      searchIcon: require("@/assets/img/workingEvents/search.png"),
      filtrateIcon: require("@/assets/img/workingEvents/filtrate.png"),
      list: [
      //   { title: "建筑垃圾偷倒", time: "2021-01-01 10:10", type: "AI上报" },
      //   { title: "建筑垃圾偷倒", time: "2021-02-02 10:10", type: "人工上报" },
      //   { title: "建筑垃圾偷倒", time: "2021-03-03 10:10", type: "人工上报" },
      //   { title: "建筑垃圾偷倒", time: "2021-01-01 10:10", type: "AI上报" },
      //   { title: "建筑垃圾偷倒", time: "2021-02-02 10:10", type: "人工上报" },
      //   { title: "建筑垃圾偷倒", time: "2021-03-03 10:10", type: "AI上报" },
      ],
      serchValue: "",
      filtrateShow: false,
      radioType: "建筑垃圾偷倒",
      radioGrid: "0703",

      companyList: [],
      isLoading: false, //下拉刷新
      isUpLoading: false, //上拉加载
      upFinished: false, //上拉加载完毕
      finished: false,
      offset: 100, //滚动条与底部距离小于 offset 时触发load事件
      pages: 0,
      textBottom: "" ,//底部内容文字

      eventStatus:'-2',//事件状态
      eventType:'',//事件类型 0:建筑垃圾偷盗 1:小包垃圾丢弃 2:垃圾溢满
      ownerGrid:'',//所属网格
      // region:'',//事件发现-AI或人工
      currPage:'1',//页数
      pageSize:'10',//每页条数
      totalPage:''
    };
  },
  mounted() {
     this.onRefresh()
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/eventDiscoveryMain" });
    },
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast("取消");
    },
    showFiltrate() {
      this.filtrateShow = true;
    },
    getRadioType(e) {
      if(!e){ e = '建筑垃圾偷倒'}
      this.radioType = (e == '建筑垃圾偷倒'?'0':(e == '小包垃圾丢弃'?'1':'2'))
    },
    getRadioGrid(e) {
      if(!e){ e = '0703'}
      this.radioGrid = e;
    },
    //筛选
    filtrateBtn(){
      this.list = [];
      this.currPage = '1';
      this.pageSize = '10';
      this.eventType = this.radioType == '建筑垃圾偷倒'?'0':this.radioType;
      this.ownerGrid = this.radioGrid;
      // this.eventStatus = this.eventStatus;
      this.getDate(this.currPage);
    },
    //排序
    sequence(){

    },
    // 事件详情
    handDetail(index) {
      // this.$router.push({ name: "AIReport"});
      this.$router.push({name:'AIReport',params: {lists:index.id}})
    },
    //下拉刷新方法
    onRefresh(){
      // this.$refs.my_scroller.finishPullToRefresh()
      this.onRefreshPort();
    },
    //下拉刷新接口
    onRefreshPort(done){
      let that = this;
      that.currPage = '1';
      let param = {
        eventStatus :  that.eventStatus,
        eventType : that.eventType,
        ownerGrid : that.ownerGrid,
        currPage : that.currPage,
        pageSize : that.pageSize
      };
      listPageAiList(param).then((res)=>{
        if(res.code === 200){
          that.list = [];
          that.list = res.data.list;
          for(let i =0;i<that.list.length;i++){
            that.list[i].eventType = that.list[i].eventType == '0'?'建筑垃圾偷倒':(that.list[i].eventType == '1'?'小包垃圾丢弃':'垃圾溢满');
            that.list[i]['region'] = 'AI发现';
          }
          // done();
        }else{
          Toast.fail(res.message)
        }
      })
    },
    //上拉加载
    onInfinite(done) {
       this.onInfinitePort(done);
    },
    //上拉加载接口
    onInfinitePort(done){
      let that = this;
      that.currPage ++;
      let param = {
        eventStatus: that.pubEventStatus,
        eventType: that.pubEventType,
        ownerGrid: that.pubOwnerGrid,
        currPage : that.currPage,
        pageSize : that.pageSize
      };
      listPageAiList(param).then((res)=>{
        if(res.code === 200){
          if(that.currPage >= res.data.totalCount) {
            Toast.fail('没有更多数据')
          }else{
            let datas = res.data.list;
             for(let i =0;i<datas.length;i++){
              datas[i].eventType = datas[i].eventType == '0'?'建筑垃圾偷倒':(datas[i].eventType == '1'?'小包垃圾丢弃':'垃圾溢满');
              that.list['region'] = 'AI发现';
            }
            that.list = that.list.concat(datas);
            done();
          }
        }else{
          Toast.fail(res.message)
        }
      })
    }
  },
  getDate(page){
    let param = {
        eventStatus :  that.eventStatus,
        eventType : that.eventType,
        ownerGrid : that.ownerGrid,
        currPage : that.currPage,
        pageSize : page
      };
    listPageAiList(param).then((res)=>{
      if(res.code === 200){
        that.list = [];
        that.list = res.data.list;
        for(let i =0;i<that.list.length;i++){
          that.list[i].eventType = that.list[i].eventType == '0'?'建筑垃圾偷倒':(that.list[i].eventType == '1'?'小包垃圾丢弃':'垃圾溢满');
          that.list[i]['region'] = 'AI发现';
        }

        // done();
      }else{
        Toast.fail(res.message)
      }
    })
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header-choise {
  width: 100%;
  height: 34px;
  background: #daf4f1;
  display: flex;
  justify-content: space-between;
  margin-top: 46px;
}
.search-box {
  width: 85px;
  height: 34px;
  display: flex;
  margin-left: 20px;
}
.search-box i {
  margin-top: 6px;
  font-size: 20px;
}
.search-text {
  display: inline-block;
  width: 70px;
  height: 34px;
  font-size: 15px;
  font-weight: 400;
  color: #04bfac;
  line-height: 34px;
}
.search-icon {
  width: 16px;
  height: 20px;
  margin: auto 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.filtrate-box {
  width: 56px;
  height: 34px;
  display: flex;
  margin-right: 20px;
}
.filtrate-text {
  display: inline-block;
  width: 40px;
  height: 34px;
  font-size: 15px;
  font-weight: 400;
  color: #04bfac;
  line-height: 34px;
}
.filtrate-icon {
  width: 13px;
  height: 16px;
  margin: auto 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.content {
      width: 94%;
    height: 650px;
    margin: auto;
    overflow-y: auto;
    position: relative;
}
.content::-webkit-scrollbar {
  display: none;
}
.content-box {
  width: 100%;
  height: 95px;
  display: flex;
  margin: 5px 0;
}
.content-box:nth-child(even) .content-left {
  background: #4472c4;
}
.content-box:nth-child(odd) .content-left {
  background: #f57665;
}
.content-box:nth-child(even) .content-detail-time-lable {
  background: #4472c4;
}
.content-box:nth-child(odd) .content-detail-time-lable {
  background: #f57665;
}
.content-box:nth-child(even) .content-detail-event-lable {
  background: #4472c4;
}
.content-box:nth-child(odd) .content-detail-event-lable {
  background: #f57665;
}
.content-box:nth-child(even) .content-right {
  background: linear-gradient(
    90deg,
    rgba(68, 114, 196, 0.2),
    rgba(255, 255, 255, 0.2)
  );
}
.content-box:nth-child(odd) .content-right {
  background: linear-gradient(
    90deg,
    rgba(245, 118, 101, 0.2),
    rgba(255, 255, 255, 0.2)
  );
}
.content-left {
  width: 1.5%;
  height: 100%;
  border-radius: 5px;
}
.content-right {
  margin-left: 5px;
  width: 98%;
  /* background: linear-gradient(90deg, rgba(245, 118, 101, 0.2), rgba(255, 255, 255, 0.2)); */
  box-shadow: 0px 0px 9px 0px rgba(205, 205, 205, 0.45);
  border-radius: 5px;
  display: flex;
}
.content-detail {
  width: 90%;
  height: 100%;
  padding-left: 10px;
}
.content-detail-text {
  width: 100%;
  height: 40px;
  font-size: 15px;
  font-weight: bold;
  color: #3e3d44;
  line-height: 40px;
}
.content-detail-time {
  width: 100%;
  height: 17px;
  display: flex;
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
}
.content-detail-time-lable {
  display: inline-block;
  width: 60px;
  height: 17px;
  text-align: center;
  /* box-shadow: 0px 0px 9px 0px rgba(153, 153, 153, 0.45); */
  border-radius: 2px;
  color: #ffffff;
  margin-right: 5px;
}
.content-detail-time-value {
  color: #181818;
}
.content-detail-event {
  width: 100%;
  height: 17px;
  display: flex;
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
  margin-top: 7px;
}
.content-detail-event-lable {
  display: inline-block;
  width: 60px;
  height: 17px;
  text-align: center;
  /* box-shadow: 0px 0px 9px 0px rgba(153, 153, 153, 0.45); */
  border-radius: 2px;
  color: #ffffff;
  margin-right: 5px;
}
.content-detail-event-value {
  color: #181818;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content-icon {
  width: 20px;
  height: 20px;
  margin: auto;
  background-image: url("~@/assets/img/workingEvents/router-right.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.filtrate-popup-title {
  margin-top: 15px;
  width: 86%;
  margin-left: 5%;
  display: flex;
}
.filtrate-popup-icon {
  width: 18px;
  height: 16px;
  background-image: url("~@/assets/img/workingEvents/selected.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.filtrate-popup-text {
  width: 100%;
  text-align: center;
}
.filtrate-radio-box {
  width: 94%;
  height: 60px;
  margin: 10px auto 0px;
}
.filtrate-radio-title {
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  font-weight: normal;
  color: #999999;
}
.filtrate-radio-btn {
  width: 100%;
  margin: 5px 0;
  height: 30px;
}
.filtrate-radio-btn-box {
  display: flex;
  /* justify-content: space-around; */
}
</style>
